<template>
  <ContentWrap>
    <div class="panda-retail-detail">
      <div class="card">
        <div class="title">
          基础信息
        </div>
        <div class="body">
          <List :column="4" sep="：" label-width="100">
            <ListItem label="零售单号" :value="orderInfo.retailOrderCode" />
            <ListItem label="经销商" :value="orderInfo.disName" />
            <ListItem label="销售部门" :value="orderInfo.saleStoreName" />
            <ListItem label="顾客姓名" :value="orderInfo.consumerName" />
            <ListItem label="顾客电话" :value="orderInfo.consumerPhone" />
            <ListItem label="备用电话" :value="orderInfo.consumerPhoneBak" />
            <ListItem label="销售日期" :value="orderInfo.saleDate" />
            <ListItem label="家居顾问" :value="orderInfo.homeConsultantName" />
            <ListItem label="设计师" :value="orderInfo.designerName" />
            <ListItem label="订单状态" dict-type-code="STATUS" app-code="retail" :value="orderInfo.state" />
            <ListItem label="送装费用" :value="orderInfo.deliveryFee" />
            <ListItem label="订单备注" :value="orderInfo.remark" :span="24" />
          </List>
        </div>
      </div>
      <div class="card">
        <div class="title">
          订单详情
        </div>
        <div class="body">
          <List :column="4" sep="：" label-width="100">
            <ListItem label="收货人姓名" :value="receiver.consigneeName" />
            <ListItem label="收货电话" :value="receiver.consigneePhone" />
            <ListItem label="备用电话" :value="receiver.consigneePhoneBak" />
            <ListItem label="收货地址" :span="24" :value="address" />
            <ListItem label="详细住址" :span="24" :value="receiver.receiverAddress" />
            <ListItem label="送货方式" :value="receiver.deliveryMode=='02'?'商家配送':'顾客自提'" />
            <ListItem label="预计预约送货时间" :value="receiver.deliveryTime" />
          </List>
          <table-box show-index :table-config="tableConfig" :data="tableData"></table-box>

          <ul class="order-price-info">
            <li>
              <span>订单总金额：</span>
              <span>￥{{ Number(totalFee).toFixed(2) }}</span>
            </li>
            <li>
              <span>优惠总金额：</span>
              <span>￥{{ formatterDis }}</span>
            </li>
            <li>
              <span>应收金额：</span>
              <span>￥{{ Number(receivable).toFixed(2) }}</span>
            </li>
            <li>
              <span>已收金额：</span>
              <span>￥{{ Number(priceInfo.paymentFee).toFixed(2) }}</span>
            </li>
            <li>
              <span>抹零金额：</span>
              <span>￥{{ Number(priceInfo.ignoreFee).toFixed(2) }}</span>
            </li>
            <li>
              <span>退货金额</span>
              <span>￥{{ Number(priceInfo.returnFee).toFixed(2) }}</span>
            </li>
            <li>
              <span>未清金额：</span>
              <span>￥{{ Number(cReceivable).toFixed(2) }}</span>
            </li>
            <li v-if="pageFlag==='returns'">
              <span>本次退货金额：</span>
              <span>￥{{ Number(cReturnFee).toFixed(2) }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </ContentWrap>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import { List, ListItem } from '@/components/List'
import { top2Retaildetail } from '@/api/infoData'
export default {
  name: 'Top2RetailDetail',
  components: {
    List, ListItem, ContentWrap
  },
  props: {
    retailOrderCode: {
      type: String,
      default: '',
      required: true
    },
    disCode: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      tableConfig: {
        hideFuncBar: true,
        setting: [
          {
            prop: 'productCode',
            label: '编码',
            minWidth: 100
          },
          {
            prop: 'categoryName',
            label: '品类',
            minWidth: 100
          },
          {
            prop: 'productName',
            label: '名称',
            minWidth: 100
          },
          {
            prop: 'productFlag',
            label: '样品/赠品/异型',
            minWidth: 100,
            formatData: v => {
              switch (v.productFlag) {
                case '01':
                  return '否'
                case '02':
                  return '样品'
                case '03':
                  return '赠品'
                case '04':
                  return '非常规异型'
                case '05':
                  return '赠品、样品'
                default:
                  return ''
              }
            }
          },
          {
            prop: 'price',
            label: '原价',
            minWidth: 100,
            render: (h, row) => {
              if (row.hasParent) {
                return h('span')
              }
              if (row.priceSource === '02') {
                return h('i', { class: 'sale-icon' }, '特价')
              }
              return h('span', { class: 'sale-org' }, row.price !== -1 ? row.price : row.selfPrice)
            }
          },
          {
            prop: 'salePrice',
            label: '销售单价',
            minWidth: 100
          },
          {
            prop: 'discountFee',
            label: '优惠金额',
            minWidth: 100
          },
          {
            prop: 'discount',
            label: '折扣',
            minWidth: 100
          },
          {
            prop: 'skuQuantity',
            label: '数量',
            minWidth: 100,
            formatData: row => row.skuQuantity || row.quantity
          },
          {
            prop: 'quantity',
            label: '开单数量',
            minWidth: 100
          },
          {
            prop: 'fixedFee',
            label: '小计',
            minWidth: 100,
            formatData: row => {
              if (!row.fixedFee) {
                if (row.hasParent) return
                if (row.fixedFee) {
                  return (Number(row.price) - Number(row.discountFee))
                } else if (row.salePrice !== null) {
                  return (Number(row.salePrice) * row.quantity)
                }
              } else if (row.fixedIndex === 1) {
                return row.fixedFee
              }
              return ''
            }
          },
          {
            prop: 'totalSalePrice',
            label: '成交金额',
            minWidth: 100
          },
          {
            prop: 'state',
            label: '送装状态',
            minWidth: 100,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'retail',
              dictTypeCode: 'STATUS'
            }
          },
          {
            prop: 'storeFinishQuantity',
            label: '完工数量',
            minWidth: 100
          },
          {
            prop: 'returnQuantity',
            label: '退货数量',
            minWidth: 100
          },
          {
            prop: 'remark',
            label: '备注',
            minWidth: 100
          }
        ]
      },
      tableData: [],
      orderInfo: {},
      priceInfo: {
        discountFee: 0,
        ignoreFee: 0,
        paymentFee: 0,
        totalFee: 0,
        returnFee: 0
      },
      discountFee: 0
    }
  },
  computed: {
    receiver() {
      return this.orderInfo.retailReceiverDTO || {}
    },
    address() {
      return 'receiverCity receiverDistrict receiverProvince receiverTown'.split(' ').map(e => this.receiver[e]).filter(e => !!e).join('/')
    },
    // 应收金额=订单总金额-优惠金额
    receivable() {
      return this.totalFee - this.discountFee
    },
    // 未清金额=应收金额-退货金额-抹零-已收金额
    cReceivable() {
      return this.receivable - this.priceInfo.returnFee - this.priceInfo.ignoreFee - this.priceInfo.paymentFee
    },
    /*
        本次退货金额计算
    */
    cReturnFee() {
      const goods = this.tableData
      const cReturnFee = goods.reduce((a, b) => {
        //     产品行成交金额 已退货金额 产品行成交金额   已退退货数量     开单数量     本次退货数量时
        const { salePrice, returnFee, totalSalePrice, returnQuantity, quantity, currentReturnQuantity } = b
        let value = null
        // 开单数量 - 已退退货数量 = 本次退货时    本次退货金额 =∑（产品行成交金额 - 已退货金额）
        if (quantity - (returnQuantity || 0) === currentReturnQuantity) { // 后端迭代字段干没了 这里做判断
          value = totalSalePrice - (returnFee || 0) // 后端迭代字段干没了 这里做判断
        }
        // 开单数量 - 已退退货数量 > 本次退货数量时    退货金额 = 销售金额 * 退货数量
        if (quantity - (returnQuantity || 0) > currentReturnQuantity) {
          value = salePrice * currentReturnQuantity
        }
        if (!isNaN(value)) {
          return a + value
        } else {
          return a
        }
      }, 0)
      return cReturnFee
    },
    // ∑（商品原价*开单数量）+配送金额
    totalFee() {
      return this.priceInfo.totalFee
    },
    formatterDis() {
      const discountFee = this.discountFee
      if (Number(discountFee).toFixed(2) < 0) return 0
      else return Number(discountFee).toFixed(2)
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // ∑（优惠金额*数量）
    compDisFee(goods) {
      const defaultGoods = goods.filter(item => !item.fixedFee)
      // 非一口价
      const defaultDisFee = defaultGoods.reduce((a, b) => {
        // const value = Number(b.discountFee)
        const value = Number(b.discountFee < 0 ? 0 : b.discountFee)
        if (!isNaN(value)) return a + value
        else return a
      }, 0)
      // 一口价
      const fixedGoods = goods.filter(item => item.fixedFee)
      let fixedDisFee = 0
      for (let i = 0; i < fixedGoods.length; i++) {
        const fixedItem = fixedGoods[i]
        fixedDisFee += fixedItem.discountFee
      }

      this.discountFee = defaultDisFee + Number(fixedDisFee)
    },
    getDetail() {
      top2Retaildetail(this.retailOrderCode, this.disCode).then(res => {
        this.orderInfo = res.data || {}
        this.tableData = res.data.retailProductList || []
        Object.keys(this.priceInfo).forEach(k => {
          if (this.orderInfo[k]) {
            this.$set(this.priceInfo, k, Number(this.orderInfo[k]))
          }
        })
        this.compDisFee(this.tableData)
      })
    },
    columnSalePrice(row) {
      const planQuantity = Number(row.storePlanQuantity) || 0
      const returnQuantity = Number(row.returnQuantity) || 0
      return (row.productFlag === '03' ||
        row.productFlag === '05') || (!row.fixedFee && (planQuantity > 0 || returnQuantity > 0))
    }
  }
}
</script>
<style lang="scss" scoped>
.panda-retail-detail{
  .card{
    margin-bottom: 20px;
    .title {
      padding: 0 20px;
      background-color: #eee;
      color: #333;
      font-size: 14px;
      font-weight: 600;
      height: 38px;
      line-height: 38px;
    }
    .body{
      border: 1px solid #eee;
      padding: 10px 20px;
    }
  }
  .order-price-info{
      display: flex;
      margin:20px 0 0;
      padding:0;
      flex-direction: row;
      justify-content: flex-end;
      li{
        list-style: none;
        margin-left:20px;
        span:nth-child(1){
          font-weight: 600;
          font-size:15px;
        }
        span:nth-child(2){
          font-size:14px;
        }
        &:nth-last-child(1){
          span:nth-child(2){
            color:red
          }
        }
      }
    }
}
.panda-retail-detail /deep/ .el-row .custom-list-item {
  margin-bottom: 0;
}
.panda-retail-detail /deep/ .el-row .custom-list-item .label-style {
  text-align-last: right;
}
.panda-retail-detail /deep/ .el-row .custom-list-item span:first-child {
  // width: 90px;
  font-size: 12px;
  text-align: right;
}
.panda-retail-detail /deep/ .el-row .custom-list-item span:last-child {
  font-size: 12px;
}
.panda-retail-detail .el-row .afterCall {
  overflow: inherit !important;
}
</style>
